<template>
  <div class="body">
    <!-- 头部复用组件 -->
    <header>
      <eleheader :title="title">
        <template v-slot:left>
          <!-- 左箭头 -->
          <van-icon
            name="arrow-left"
            class="header_left"
            @click.native="$router.back()"
          />
        </template>
        <template v-slot:right>
          <!-- 切换城市 -->
          <span class="header_right" @click="$router.back()">切换城市</span>
        </template>
      </eleheader>
    </header>
    <!-- 搜索框 -->
    <div class="searchBox">
      <!-- 输入框 -->
      <van-field
        v-model.trim="cityData.keyword"
        clearable
        placeholder="输入学校、商务楼、地址"
      />

      <!-- 按钮 -->
      <van-button block @click.native="searchFn">提交</van-button>
    </div>

    <!-- 搜索出的内容 -->
    <div class="searchContent">
      <!-- 搜索历史 -->
      <div class="history" v-show="historyIsShow">
        <span>搜索历史</span>
        <ul>
          <li
            v-for="(item, index) in historyData"
            :key="index"
            @click="toIndex(item.geohash, item.name, item.address)"
          >
            <span>{{ item.name }}</span
            ><span>{{ item.address }}</span>
          </li>
        </ul>
        <!-- 按钮 -->
        <van-button
          block
          v-show="historyData.length > 0"
          @click.native="removeFn"
          >清空所有</van-button
        >
      </div>

      <!-- 搜索新的 -->
      <div class="new">
        <ul>
          <li
            v-for="(item, index) in cityInFo"
            :key="index"
            @click="toIndex(item.geohash, item.name, item.address)"
          >
            <span>{{ item.name }}</span
            ><span>{{ item.address }}</span>
          </li>
          <li class="noResult" v-show="noResultIsShow">很抱歉！无搜索结果</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
//引入头部组件
import eleheader from "../components/eleheader.vue";
//引入获取城市信息
import { City } from "@/api/homeCity";
//引入获取所选城市信息
import { CityInfo } from "@/api/homeCity";
//引入获取搜索城市地址信息
import { Address } from "@/api/homeCity";
export default {
  components: { eleheader },
  data() {
    return {
      cityData: {
        //传参用
        city_id: "", //城市id
        keyword: "", //获取输入框的内容
      },
      title: "", //渲染在头部的城市名
      historyIsShow: true, //历史内容展示
      noResultIsShow: false, //无搜索结果提示
      cityInFo: [], //城市地址信息 渲染用
      //渲染历史数据用
      historyData: JSON.parse(localStorage.getItem("history-Data")) || [],
      //  {
      //   address: "",
      //   name: "",
      //   geohash: "",
      // },
    };
  },

  created() {
    //获取传入的城市id
    let id = this.$route.query.id;
    //请求城市具体信息
    CityInfo(id).then((res) => {
      console.log("城市具体信息", res);

      //将城市名字赋值给变量'title'
      this.title = res.data.name;
    });
  },

  methods: {
    //新搜索部分
    //输入框输入后，点击按钮，请求城市地址的数据
    searchFn() {
      // 做安全判定,当用户为空,弹出提示
      if (this.cityData.keyword === "") {
        this.$toast("请输入内容");
        return;
      }

      //将搜索不到时弹出的信息提示重新赋值为false
      this.noResultIsShow = false;
      //隐藏历史搜索部分
      this.historyIsShow = false;

      //城市id赋值
      this.cityData.city_id = this.$route.query.id;
      //请求城市地址

      Address(this.cityData).then((res) => {
        // console.log("搜索的地址信息", res);
        // 将城市地址信息赋值给变量
        this.cityInFo = res.data;

        // 搜索不到时,弹出信息提示
        if (this.cityInFo.length === 0) {
          this.noResultIsShow = true;
        }
      });
    },

    //数组里面的对象去重
    flatFn(arr) {
      // 对数组arr去重(user_id相同的去重)
      let hash = {};
      // 数组对象去重，有用户可能重复关注，导致获取到的粉丝有重复的。
      return arr.reduce(function (item, next) {
        hash[next.name] ? "" : (hash[next.name] = true && item.push(next));
        return item;
      }, []);
    },

    //点击城市带经纬度作为参数跳转到首页

    toIndex(geohash, name, address) {
      let konel = localStorage.getItem("cilick");
      if (konel == null) {
        console.log(2345);
        this.$toast.fail("未登录");
        this.$router.push("/wyregisterS");
        return;
      } else {
        this.$router.push({
          path: "/index",
          query: { geohash },
        });
      }

      //将参数赋值到历史搜索数据变量
      this.historyData.push({
        name,
        address,
        geohash,
      });
      //对数组进行去重
      this.historyData = this.flatFn(this.historyData);
      //将变量存到本地存储
      localStorage.setItem("history-Data", JSON.stringify(this.historyData));
    },

    // 清空历史记录
    removeFn() {
      //删除本地存储
      localStorage.removeItem("history-Data");
      //重新赋值,刷新数据
      this.historyData = [];
    },
  },
};
</script>

<style lang="less" scoped >
//背景颜色
.body {
  background-color: #f5f5f5;
}

//头部
header {
  justify-content: space-between;
}
.header_left,
.header_right {
  padding: 0 10px;
}
.header_left {
  margin-top: 14px;
  width: 14%;
}

//搜索模块
.searchBox {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-top: 10px;
  background-color: #fff;
  height: 120px;
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  .van-field,
  .van-button {
    width: 90%;
    height: 35%;
    margin: 0 auto;
    border-radius: 5px;
  }
  //   搜索框
  .van-field {
    border: 1px solid #e6e6e6;
    font-size: 16px;
  }
  //   按钮
  .van-button {
    background-color: #3190e8;
    color: #fff;
  }
}

//搜索出的内容
.searchContent {
  border-top: 1px solid #f5f5f5;
  background-color: #fff;
  height: 100%;
  ul {
    height: 100%;

    li {
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      border-bottom: 1px solid #f5f5f5;
      padding-left: 5%;
      & > span:nth-child(2) {
        font-size: 10px;
        color: #9a9a9a;
      }
    }
  }

  // 搜索历史
  .history {
    height: 100%;
    > span {
      font-size: 10px;
      display: block;
      color: #000;
      border-bottom: 2px solid #f5f5f5;
      line-height: 18px;
      padding-left: 5%;
    }
    // 按钮
    .van-button {
      margin: 0 auto;
    }
  }

  //   搜索新的
  .new {
    .noResult {
      height: 50px;
      color: #9a9a9a;
    }
  }
}
</style>